<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>文件管理</title>
    <th:block th:replace="~{commons/commons::head}"/>
    <script src="/static/js/vue/vue.min.js"></script><!--vue.js-->
    <script src="/static/js/page.min.js"></script><!--分页组件-->
</head>
<style>
    .table-responsive table{
        text-align: center;
    }
    .table-responsive table th{
        cursor: pointer;
        text-align: center;
    }
    .table-responsive table tbody td{
        height: 35px;
        line-height: 35px;
    }
    .search{
        display: inline-block;
        margin-left: 15px;
    }
</style>
<body>

<div th:replace="~{commons/commons::top}"></div>

<div id="app">
    <div class="container-fluid">

        <!--表格-->
        <div class="container" style="margin-top: 50px;max-width: 1300px">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <span class="lead">视频列表</span>
                        </div>
                        <div class="card-body">
                            <span>你可以管理你的视频文件</span>
                        </div>
                        <div class="table-responsive">

                            <table class="table table-hover table-striped" style="margin-bottom: 0">
                                <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>名称</th>
                                    <th>文件路径</th>
                                    <th>文件类型</th>
                                    <th>备注</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="fileInfo">
                                <tr v-for="(item,index) in jsonData.list">
                                    <td>{{item.fileID}}</td>
                                    <td>{{item.fileName}}</td>
                                    <td>{{item.filePath}}</td>
                                    <td>{{item.fileType}}</td>
                                    <td>{{item.fileNote}}</td>
                                    <td>
                                        <a class="btn btn-outline-danger" @click="del(item.fileID,index)" data-toggle="modal" data-target="#myModal" title="谨慎删除！">
                                            删除
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 col-sm-6">
                <nav class="nav-fenye">
                    <ul class="pagination" id="pagination">
                        <!--通过ajax动态生成-->
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">确认删除</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    确认删除文件吗？
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal" @click="confirmDel()">确定</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
                <form>
                    <input type="text" id="modalVal" hidden>
                </form>
            </div>
        </div>
    </div>
</div>

<script>

    let vm = new Vue({
        el : '#app',
        data : {
            keyWord : '',
            jsonData : '',
            delID : 0,
            delIndex : 0,
        },
        methods : {
            initData(){//初始化数据
                axios({
                    method : "GET",
                    url:"/file/json/",
                }).then((response)=>{
                    console.log(response.data);
                    this.jsonData = response.data;
                    this.pagination(this.jsonData.totalPage,null)
                }).catch(function (error) {
                    console.log(error);
                });
            },
            pagination(totalPage,keyWord){//生成页码列表
                $("#pagination").pagination({
                    pages: totalPage, //总页数
                    edges: 16, //默认访问
                    cssStyle: '', //写入自定义css
                    displayedPages: 5, //显示几个
                    onPageClick: (pageNumber, event)=> {
                        //点击时调用
                        console.log(pageNumber);
                        this.getNewPageByAjax(keyWord,pageNumber)
                    },
                    onInit: (pageNumber)=> {
                        //刷新时或初始化调用
                        if (pageNumber === '1'){
                            console.log("初始化加载用户数据")
                        }else{
                            this.getNewPageByAjax(null,pageNumber)
                        }
                    }
                });
            },
            getNewPageByAjax(keyWord,pageNumber){//ajax获取新页面信息
                if (keyWord === null){
                    axios({
                        method : "GET",
                        url:"/file/json/" + pageNumber,
                    }).then((response)=>{
                        this.jsonData = response.data
                    }).catch(function (error) {
                        console.log(error);
                    });
                }else{
                    axios({
                        method : "GET",
                        url: "/file/search/" + keyWord + "/" + pageNumber,
                    }).then((response)=>{
                        this.jsonData = response.data
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            },
            del(id,index){//获得删除所需的信息
                this.delID = id;
                this.delIndex = index;
            },
            confirmDel(){//删除方法
                axios({
                    method : "GET",
                    url:"/file/del/" + this.delID,
                }).then((response)=>{
                    if (response.data === true){
                        this.jsonData.list.splice(this.delIndex,1)
                        Qmsg.success("删除成功",{position:'center'});
                    }else{
                        Qmsg.info("删除失败",{position:'center'});
                    }
                }).catch(function (error) {
                    Qmsg.info("删除失败",{position:'center'});
                });
            },
        },
        beforeMount (){//初始化数据
            console.log("页面挂载之前")
            /*消息弹窗全局配置*/
            Qmsg.config({
                showClose:true,
                timeout:2000,
                autoClose:true
            })
            this.initData()
        },
        mounted(){
            console.log("页面挂载之后")
        },
    });

</script>
</body>
</html>
